<template>
  <!-- 严重告警 -->
  <div>
    <el-table :data="criticalDataSource" :header-cell-style="{ background: '#fbfbfa', height: '60px' }" stripe class="boxTable boxTable-Bottom">
      <el-table-column label="设备名称" align="center">
        <template #default="{ row }">
          {{ row.TerminalIdentity ? (devices.find((obj: any) => obj.TerminalIdentity == row.TerminalIdentity)).DeviceName + `\xa0\xa0\xa0 (` + (devices.find
            ((obj: any) => obj.TerminalIdentity ==
              row.TerminalIdentity)).TerminalName + `)` : (devices.find((obj: any) => obj.TerminalIdentity ==
                selectDevice)).DeviceName + `(` + (devices.find((obj: any) => obj.TerminalIdentity ==
                  selectDevice)).TerminalName + `)` }}



        </template>
      </el-table-column>
      <el-table-column prop="AlarmTime" label="告警时间" :formatter="dateFormat" align="center">
      </el-table-column>
      <el-table-column prop="AlarmSource" label="告警来源" align="center">
      </el-table-column>
      <el-table-column prop="AlarmMessage" label="告警信息" align="center">
      </el-table-column>

    </el-table>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, computed } from "vue";
import moment from 'moment'
defineProps(["criticalDataSource", "devices", "selectDevice"])
const dateFormat = (row: any, column: any) => {
  const date = row[column.property]
  if (date === undefined) {
    return ''
  }
  // moment(date).format('YYYY-MM-DD HH:mm:ss')
  return moment(date).format('YYYY-MM-DD HH:mm:ss')
}
</script>

<style scoped>
@media screen and (max-height: 1440px) {
  .boxTable-Bottom {
    height: 970px;
  }
}

@media screen and (max-height: 1080px) {
  .boxTable-Bottom {
    height: 600px;
  }
}

.boxTable {
  width: 100%;
}
</style>